<template>
    <div class="app-container">
        <el-form ref="queryParamsRef" :inline="true" :model="queryParams" label-position="left">
            <el-form-item label="状态：" prop="state">
                <el-select v-model="queryParams.state" clearable @change="getList" style="width: 10rem;">
                    <el-option label="全部" value="" />
                    <el-option v-for="item in nj_management_state" :key="item.value" :label="item.label"
                        :value="item.value" />
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="getList">
                    <el-icon class="me-1">
                        <Search />
                    </el-icon>
                    查询
                </el-button>
            </el-form-item>
            <el-form-item>
                <el-button @click="resetQueryParamsHandle(queryParamsRef)">
                    <el-icon class="me-1">
                        <Refresh />
                    </el-icon>
                    重置
                </el-button>
            </el-form-item>
        </el-form>

        <el-divider class="mt-0" />


        <el-row class="mb-3">
            <el-col :span="24">
                <el-space>
                    <el-button type="primary" plain @click="executeFireActionRef.showAddExecuteFireAction()">
                        <el-icon class="me-2">
                            <Plus />
                        </el-icon>
                        新增
                    </el-button>
                </el-space>
            </el-col>
        </el-row>

        <el-table :data="tableData" v-loading="loading" border stripe
        :row-style="tableRowStyle">
            <el-table-column prop="unitId" label="单位名称" width="200" />
            <el-table-column prop="place" label="发生地点" width="200" />
            <el-table-column prop="occurdate" label="发生时间" width="200" />
            <el-table-column prop="peopleId" label="重点对象" width="180" />
            <el-table-column prop="planId" label="预案名称" width="auto" />
            <el-table-column prop="stateText" label="状态" width="180" />
            <el-table-column fixed="right" label="操作" width="200" align="center">
                <template #default="scope">
                    <el-button type="primary" size="small" link
                        @click="executeFireActionRef.showEditExecuteFireAction(scope.row)"
                        v-if="scope.row.state === '0'">
                        <el-icon class="me-1">
                            <Edit />
                        </el-icon>
                        编辑
                    </el-button>

                    <!--                    <el-popconfirm-->
                    <!--                        confirm-button-text="确定"-->
                    <!--                        cancel-button-text="取消"-->
                    <!--                        icon-color="#626AEF"-->
                    <!--                        title="确定要结束此条处置吗?"-->
                    <!--                        @confirm="endActionHandle(scope.row)"-->
                    <!--                        :width="230"-->
                    <!--                        v-if="scope.row.state ==='0'"-->
                    <!--                    >-->
                    <!--                        <template #reference>-->
                    <el-button type="warning" size="small" link v-if="scope.row.state === '0'"
                        @click="endActionHandle(scope.row)">
                        <el-icon class="me-1">
                            <SwitchButton />
                        </el-icon>
                        结束
                    </el-button>
                    <!--                        </template>-->
                    <!--                    </el-popconfirm>-->

                    <el-button type="danger" size="small" link @click="deleteHandle(scope.row)"
                        v-if="scope.row.state === '0'">
                        <el-icon class="me-1">
                            <Delete />
                        </el-icon>
                        删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>

        <pagination v-show="total > 0" v-model:page="paging.pageNum" v-model:limit="paging.pageSize" :total="total"
            @pagination="getList" />

        <AddEditExecuteFireAction ref="executeFireActionRef" @refresh-list="getList" />
    </div>
</template>

<script setup>
import PageHeader from "@/components/PageHeader/index.vue";
import { Delete, Edit, Plus, Refresh, Search, SwitchButton } from "@element-plus/icons-vue";
import AddEditExecuteFireAction from "@/components/ExecuteFireAction/AddEditExecuteFireAction.vue";
import { getCurrentInstance, useTemplateRef } from "vue";
import { deleteEmergencyAction, endEmergencyAction, getEmergencyActionList } from "@/api/FireAction/ExecuteFireAction.js";
import { ElMessage, ElMessageBox } from "element-plus";
import PageEnum from "@/enum/PageEnum.js";

const { proxy } = getCurrentInstance();
const {
    nj_management_state
} = proxy.useDict('nj_management_state')

const loading = ref(false)
const total = ref(0)
const paging = ref({
    // 页码
    pageNum: 1,
    // 分页数量
    pageSize: PageEnum.SIZE
})
const queryParams = ref({
    state: ''
})

const tableData = ref([])

const queryParamsRef = useTemplateRef('queryParamsRef')
const executeFireActionRef = useTemplateRef('executeFireActionRef')

onMounted(() => {
    getList()
})
// 斑马纹样式函数
const tableRowStyle = ({ row, rowIndex }) => {
    if (rowIndex % 2 === 0) {
        return { backgroundColor: '#e6ecff' }; // 偶数行背景色
    }
    return {}; // 奇数行默认透明
}
// 重置搜索
const resetQueryParamsHandle = async (elForm) => {
    if (!elForm) return
    elForm.resetFields()
    await getList()
}

// 获取列表
const getList = async () => {
    loading.value = true
    const res = await getEmergencyActionList(queryParams.value, paging.value)
    tableData.value = res.rows
    total.value = res.total
    loading.value = false
}

// 结束应急处置
const endActionHandle = async (row) => {
    ElMessageBox.confirm(
        '确定要结束此条处置吗？',
        '提示',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    ).then(async () => {
        await endEmergencyAction(row.managementId).then(async () => {
            await getList()
            ElMessage({
                type: 'success',
                message: '操作成功。',
            })
        })
    }).catch(() => {
        ElMessage({
            type: 'info',
            message: '您已取消操作。',
        })
    })
}

// 删除应急处置
const deleteHandle = async (row) => {
    ElMessageBox.confirm(
        '确定要删除此条处置吗？',
        '提示',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    ).then(async () => {
        await deleteEmergencyAction(row.managementId).then(async () => {
            await getList()
        })
    }).catch(() => {
    })
}
</script>

<style lang="scss" scoped>
/* 保留斑马纹的同时添加悬停效果 */
:deep().el-table--striped .el-table__body tr.el-table__row--striped:hover td {
  background-color: #a5b8f4; /* 悬停时的红色 */
}

:deep().el-table__body tr:hover td {
  background-color: #a5b8f4; /* 悬停时的红色 */
}</style>